<template>
  <div class="front-container">
    <div class="nav-container">
      <div class="nav-left">
        <span class="logo">API开放平台</span>
        <div class="nav-menu">
          <el-button type="text" @click="$router.push('/front/home')" :class="{ active: isActive('/front/home') }">首页</el-button>
          <el-button type="text" @click="$router.push('/front/docs')" :class="{ active: isActive('/front/docs') }">文档</el-button>
          <el-button type="text" @click="$router.push('/front/help')" :class="{ active: isActive('/front/help') }">帮助</el-button>
        </div>
      </div>
      <div class="nav-right">
        <div class="search-container">
          <el-input
            v-model="searchQuery"
            placeholder="搜索API..."
            prefix-icon="el-icon-search"
            clearable
            class="search-input"
            @keyup.enter.native="handleSearch"
          />
        </div>
        <!-- 未登录状态 -->
        <template v-if="!isLogin">
          <el-button type="text" @click="$router.push('/login')">登录</el-button>
          <el-button type="primary" size="small" @click="$router.push('/register')">注册</el-button>
        </template>
        <!-- 已登录状态 -->
        <el-dropdown v-else @command="handleCommand" trigger="click">
          <span class="avatar-wrapper">
            <el-avatar :size="32" :src="avatar" icon="el-icon-user-solid"></el-avatar>
            <span class="username">{{ nickname }}</span>
            <i class="el-icon-caret-bottom"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="myapis">
              <i class="el-icon-connection"></i> 我的API
            </el-dropdown-item>
            <el-dropdown-item command="profile">
              <i class="el-icon-user"></i> 个人中心
            </el-dropdown-item>
            <el-dropdown-item command="admin" v-if="isAdmin">
              <i class="el-icon-s-tools"></i> 后台管理
            </el-dropdown-item>
            <el-dropdown-item divided command="logout">
              <i class="el-icon-switch-button"></i> 退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    
    <!-- 路由出口 -->
    <router-view />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'FrontLayout',
  data() {
    return {
      searchQuery: ''
    }
  },
  computed: {
    ...mapGetters([
      'avatar',
      'nickname',
      'roles',
      'isAdmin'
    ]),
    isLogin() {
      return this.$store.getters.token && this.$store.getters.roles.length > 0
    }
  },
  created() {
    // 如果已登录但没有用户信息,则获取用户信息
    if (this.$store.getters.token && !this.$store.getters.roles.length) {
      this.$store.dispatch('GetInfo')
    }
  },
  methods: {
    isActive(path) {
      return this.$route.path.startsWith(path)
    },
    handleSearch() {
      if (this.searchQuery.trim()) {
        this.$router.push({
          path: '/front/home',
          query: { keyword: this.searchQuery.trim() }
        })
      }
    },
    handleCommand(command) {
      switch (command) {
        case 'myapis':
          this.$router.push('/front/myapis')
          break
        case 'profile':
          this.$router.push('/front/profile')
          break
        case 'admin':
          this.$store.dispatch('GenerateRoutes').then(() => {
            this.$router.push('/backend/index').catch(err => {
              console.error('Navigation failed:', err)
              this.$message.error('页面跳转失败，请重试')
            })
          }).catch(() => {
            this.$message.error('加载权限失败，请重试')
          })
          break
        case 'logout':
          this.$confirm('确认退出系统吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$store.dispatch('LogOut').then(() => {
              this.$router.push('/front/home')
            })
          }).catch(() => {})
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.front-container {
  min-height: 100vh;
  background-color: #f5f7fa;

  .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 60px;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

    .nav-left {
      display: flex;
      align-items: center;

      .logo {
        font-size: 20px;
        font-weight: bold;
        color: #303133;
        margin-right: 40px;
      }

      .nav-menu {
        display: flex;
        align-items: center;
        gap: 20px;

        .el-button {
          font-size: 16px;
          padding: 0;
          height: auto;

          &:hover, &.active {
            color: #409EFF;
          }
        }
      }
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 20px;

      .el-button + .el-button {
        margin-left: 10px;
      }

      .search-container {
        .search-input {
          width: 300px;
        }
      }

      .avatar-wrapper {
        display: flex;
        align-items: center;
        cursor: pointer;
        
        .el-avatar {
          margin-right: 8px;
        }
        
        .username {
          margin-right: 8px;
          font-size: 14px;
          color: #606266;
        }
      }
    }
  }
}
</style> 